<template>
  <div class="iframe-header">
    <el-tabs
      v-if="menuList && menuList.length"
      class="iframe-header-menu"
      v-model="menuIndex"
      @tab-click="changeMenu"
    >
        <el-tab-pane
          :class="'test'"
          v-for="(item, index) in menuList"
          :key="index"
          :label="item.name"
          :name="index + ''"
        ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getMenuList } from '@/api'

export default {
  name: 'IframeHeader',
  data() {
    return {
      menuIndex: '0',
      menuList: []
    }
  },
  async created() {
    this.getMenuList()
  },
  methods: {
    async getMenuList() {
      let parentId = this.$route.query.parentMenuId || this.$route.query.menuId

      if (!parentId) {
        return
      }

      let res = await getMenuList({
        isSso: false,
        parentId: parentId,
        typeList: ['normal', 'redirect'],
      })
      this.menuList = res.rows;
      if (this.menuList.length) {
        sessionStorage.setItem('menuId', this.menuList[0].primaryKey)
      }
      setTimeout(() => {
        this.setMenuIndex();
      }, 500);
    },

    async changeMenu(item) {
      // 如果是当前导航，则不触发
      if (this.menuOldIndex === item.index) {
        return
      }

      let menuInfo = this.menuList[item.index - 0];
      console.log("🚀 ~ file: iframeHeader.vue ~ line 64 ~ changeMenu ~ menuInfo", menuInfo)
      let menuUrl = this.changeDevHost(menuInfo.menuUrl);
      let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
      let url = menuUrl + separator + this.getParamStr(menuInfo)
      location.replace(url)
      setTimeout(() => {
        this.menuIndex = this.menuOldIndex;
        this.setMenuStorge()
      }, 500);
    },

    changeDevHost(url) {
      // 开发环境替换域名为本地ip
      if (process.env.NODE_ENV === 'development' && /^http/.test(url)) {
        let localHost = location.protocol + '//' + location.host
        url = url.replace(/^(?:[^\/]|\/\/)*/, localHost)
      }
      return url
    },

    getParamStr(menuInfo) {
      let paramData = []
      let menuParamData = this.$route.query
      let queryData = Object.assign(menuParamData, {
        menuId: menuInfo.primaryKey,
        parentMenuId: this.$route.query.parentMenuId || this.$route.query.menuId|| menuInfo.parentId || ''
      })

      for (let key in queryData) {
        paramData.push(key + '=' + queryData[key])
      }

      return paramData.join('&')
    },

    setMenuStorge(type, url) {
      // 初始进入一级导航时缓存一级导航参数
      if (type == 'init') {
        sessionStorage.setItem('topNavParams', url.split('?')[1])
      }

      if (!this.menuList[this.menuIndex]) {
        return
      }

      sessionStorage.setItem('menuId', this.menuList[this.menuIndex].primaryKey)
    },

    setMenuIndex() {
      if (!this.menuList.length) {
        return
      }

      let index = -1;

      for (let i = 0, len = this.menuList.length;i < len;i++) {
        if (location.pathname.indexOf(this.menuList[i].menuUrl) > -1) {
          index = i;
          break;
        }
      }

      if (index === -1) {
        let baseMoudle = location.pathname.split('/')[0] || location.pathname.split('/')[1]
        for (let i = 0, len = this.menuList.length;i < len;i++) {
          if (this.menuList[i].menuUrl.indexOf(baseMoudle) > -1) {
            index = i;
            break;
          }
        }
      }

      if (index === -1) {
        index = 0
      }

      this.menuIndex = index + '';
    },

  }
}
</script>

<style lang="scss">
.iframe-header {
  background: $background-color;

  .el-tabs__header {
    margin: 0 0 10px;
    background-color: #ffffff;

    .el-tabs__item {
      height: 40px;
      line-height: 40px;
      padding: 0 30px !important;
      color: #303133;
      font-size: 15px;
      font-weight: 500;
    }

    .el-tabs__active-bar {
      display: none;
    }
  }

  .is-active {
    color: $primary-active-color !important;
  }
}
</style>
